<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="btn">
				https://mp.weixin.qq.com/s/LgwTCzBgYWBe2JFXg8YMtQ<br />
			scroll 事件本身会触发页面的重新渲染，<br />
			同时 scroll 事件的 handler 又会被高频度的触发, <br />
			因此事件的 handler 内部不应该有复杂操作，<br />
			例如 DOM 操作就不应该放在事件处理中。<br />
			
			针对此类高频度触发事件问题<br />
			（例如页面 scroll ，屏幕 resize，监听用户输入等）<br />
			，下面介绍两种常用的解决方法，防抖和节流。<br />
		</div>
		<div class="sc" id="sc">
		
		
		</div>
	
			  <div class="sd" id="canmove">
			 固定的滚动穿透问题探索start<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索<br />
			 固定的滚动穿透问题探索end<br />
		</div>
				
	</head>
	<body>
		<style>
			.btn{
				height: 2000px;
				position: relative;
				border: 1px solid crimson;
				border-bottom: 1px solid #000000;
				font-size: 2rem
			}
			.sc{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.1);
				position: fixed;
				left:0;
				top:0;
			}
			.st{
				touch-action: none;
			}
			.sd{
				width: 450px;
				height: 450px;
				overflow-y:scroll ;
				border: 1px solid #000;
				position: fixed;
				left: 50%;
				top: 50%;
				color: #000;
				z-index: 5;
				font-size: 2rem;
				
				transform:translate(-50%,-50%) ;
			}
		</style>
		<script>
			var firstY=0
			var divEle = document.getElementById("canmove");
			var divsc = document.getElementById("sc");
			// 手指触碰到屏幕时触发
			// divEle.addEventListener('touchstart',
			// 	firstY=e.targetTouches[0].clientY
			// 	
			// })
			// 
			
			divEle.addEventListener('touchstart', function (e) {
				// 打印的事件对象
				firstY=e.targetTouches[0].clientY
			},false)
			
			
			divsc.addEventListener('touchstart', function (e) {
				// 打印的事件对象
				console.log("222")
								return e.preventDefault()
			},false)
			
			// consloe.log("firstY",firstY)
			console.log("firstY",firstY)
			divEle.addEventListener('touchmove', function (e) {			  
				// let target =document.getElementById('canmove') 
				let target =divEle 
				var tdiv =target.classList.contains('st'); //return true or false
			 	console.log("firstY2e",firstY)
				let offsetHeight =target.offsetHeight,
				scrollHeight =target.scrollHeight;
				let changedTouches =e.changedTouches;
				let scrollTop =target.scrollTop;
				console.log("firstY2",firstY)
				if(changedTouches.length>0){
					let touch =changedTouches[0]||{};     
					let moveY =touch.clientY;
					if(moveY >firstY&&scrollTop===0&&e.cancelable){// 滑动到弹窗顶部临界条件
						e.preventDefault()
						return false      	
					}else if(moveY <firstY&&scrollTop +offsetHeight >=scrollHeight&&e.cancelable){
						e.preventDefault()
						return false
					}
				}
			},false)
			
			
//			divEle.addEventListener('touchstart', function (e) {
//				// 打印的事件对象
//				return e.preventDefault()
//			})
		</script>
	</body>
	
</html>
